<script src="/js/validateIsMain.js"></script>
<style>
    .box-upload {
        width: 300px;
        height: 300px;
        border:1px dashed #000;
        position:absolute;
        top: 50%;
        left: 50%;
        margin:-150px 0 0 -150px;
        text-align:center;
        font:20px/300px '微软雅黑';
        display:none;
    }
</style>
<div id="subContainer">
    <header class="page-header no-margin">
        <div class="container-fluid">
            <h2 class="no-margin-bottom" style="margin-top: 0px; font-size: 20px;">文件</h2>
        </div>
    </header>

    <div class="breadcrumb-holder container-fluid">
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="index.html">首页</a></li>
            <li class="breadcrumb-item active">文件</li>
        </ul>
    </div>

    <section class="tables">
        <div class="container-fluid">
            <div class="row">
                <div class="card">
                    <div class="card-header d-flex align-items-center">
                        <h3 class="h4">文件 {{dirs.join('/')}}</h3>
                    </div>
                    <div class="card-body" style="padding-top: 0px;">
                        <form class="form-inline float-right" action="#">
                            <div class="form-group">
                                <button type="button" class="btn btn-default"
                                        @click="toBack()"><i class="fa fa-backward">上一级</i></button>

                                <button type="button" class="btn btn-success"
                                        @click="showAddDirect()">新建文件夹</button>
                            </div>
                        </form>
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                <th>序号</th>
                                <th>类型</th>
                                <th>名称</th>
                                <th>更新时间</th>
                                <th>大小</th>
                                <th>操作</th>
                                </thead>
                                <tbody>
                                <tr v-for="(item, index) in items" @dblclick="selectFolder(item)">
                                    <th scope="row">{{index + 1}}</th>
                                    <td><span :class="item.file? 'fa-file-o' : 'fa-folder-open'" class="fa"></span></td>
                                    <td><span>{{item.name}}</span></td>
                                    <td><span>{{item.timestamp | toNow}}</span></td>
                                    <td><span>{{item.size | fileSize}}</span></td>
                                    <td>
                                        <a href="#" class="btn btn-xs btn-danger" @click="deleteFile(item)"
                                           style="font-size: 0.7rem; padding: 0.2rem;"><i class="fa fa-trash-o"></i>删除</a>

                                        <a href="#" class="btn btn-xs btn-warning" @click="showLinkAddress(item)" v-if="item.file"
                                           style="font-size: 0.7rem; padding: 0.2rem;"><i class="fa fa-link"></i>链接地址</a>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">新建文件夹</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <input type="text" placeholder="请输入文件夹名称" class="form-control" v-model="newDir">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" @click="addDirectory()">提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>




    <div class="modal fade" id="showDetailModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="max-width: 1000px; width: 700px;">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="showDetailModalLabel">文件链接</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-2">
                            <label>下载链接</label>
                        </div>
                        <div class="col-sm-10">
                            <div class="text-dark"><span>{{loadDownLoadUrl()}}</span></div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-2">
                            <label>文件路径</label>
                        </div>
                        <div class="col-sm-10">
                            <span>
                                {{loadRout()}}
                            </span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" @click="addDirectory()">提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <div class="box-upload" id="box" @drop="">请将文件拖拽到此区域</div>
</div>

<script>

    window.onload = function () {
        var oBox = document.getElementById('box');
        var oM = document.getElementById('m1');
        var timer = null;
        document.ondragover = function(){
            clearTimeout(timer);
            timer = setTimeout(function(){
                oBox.style.display = 'none';
            },200);
            oBox.style.display = 'block';
        };
        //进入子集的时候 会触发ondragover 频繁触发 不给ondrop机会
        oBox.ondragenter = function(){
            oBox.innerHTML = '请释放鼠标';
        };
        oBox.ondragover = function(){
            return false;
        };
        oBox.ondragleave = function(){
            oBox.innerHTML = '请将文件拖拽到此区域';
        };
        oBox.ondrop = function(ev){
            var oFile = ev.dataTransfer.files[0];
            var reader = new FileReader();
            //读取成功
            reader.onload = function(){
                console.log(reader);
                var formData = new FormData();
                formData.append("path", vuePage.dirs.join('/'));
                formData.append("file",oFile);
                // formData.append("token",token);
                $.ajax({
                    url:'/file', /*接口域名地址*/
                    type:'post',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success:function(res){
                        console.log(res.data);
                        if(res["code"]=="200"){
                            toastr.success(res.msg, '成功');
                        }else if(res["code"]!=="200"){
                            toastr.error(res.msg, '失败');
                        }else{
                            console.log(res);
                        }
                        vuePage.pagequery();
                    }
                })
            };
            reader.onloadstart = function(){
                alert('读取开始');
            };
            reader.onloadend = function(){
                alert('读取成功正在上传，中途请勿刷新页面');
            };
            reader.onabort = function(){
                alert('中断');
            };
            reader.onerror = function(){
                alert('读取失败');
            };
            reader.onprogress = function(ev){
            };
            reader.readAsDataURL(oFile,'base64');
            return false;
        };
    };
    vuePage = new Vue({
        el: '#subContainer',
        data: {
            applicationContextRootPath: '/survey/',
            dirs: [],
            dirName: '',
            items: [],
            newDir: "新建文件夹",
            selectedItem: {}
        },
        created: function () {
            this.pagequery();
        },
        methods: {
            loadDownLoadUrl() {
                let baseUrl = "http://127.0.0.1:8081/file/download?";
                baseUrl += "path="+ this.dirs.join('/') + "&name=" + this.selectedItem.name;
                return baseUrl;
            },
            loadRout() {
                let r = this.dirs ? this.dirs.join("/") : '/';
                r = r ? r : '/';
                if(!r.endsWith('/')) {
                    r += '/'
                }
                r += this.selectedItem ? this.selectedItem.name : '';
                return r;
            },
            showLinkAddress(item) {
                console.log(item);
                this.selectedItem = item;
                $("#showDetailModal").modal('show');
            },
            addDirectory() {
                let that = this;
                AJAX.POST('/file/directory', {path: this.dirName, name: this.newDir}, function (resp) {
                    toastr.success(resp.msg);
                    that.pagequery();
                    $("#myModal").modal("hide");
                })
            },
            showAddDirect() {
                $("#myModal").modal("show");
            },
            toBack() {
                this.dirs = this.dirs.splice(0, this.dirs - 1);
                this.dirName = this.dirs[this.dirs.length - 1];
                this.pagequery();
            },
            selectFolder(item) {
                this.dirName = item.name;
                this.dirs.push(this.dirName);
                this.pagequery();
            },
            details(item) {
                toPage('/pages/images/details.html', item.Id);
            },
            deleteFile(item) {
                let that = this;
                confirm("您确定要删除这个文件吗?", "", function (isConfirm) {
                    if (isConfirm) {
                        AJAX.DELETE_PARAMS('/file', {path: that.dirs.join('/'), name: item.name}, function (resp) {
                            toastr.success(resp.msg);
                            that.pagequery();
                        })
                    }
                }, {confirmButtonText: '确认', cancelButtonText: '取消', width: 400});
            },
            pagequery: function () {
                var that = this;
                AJAX.GET('/file', {dir: that.dirs.join('/')}, function (resp) {
                    if(!resp.data) {
                        return;
                    }
                    that.items = resp.data;
                })
            }
        }
    });



</script>